<template>
  <div class="pagestyle">
    <div class="container">
      <div class="left">
        <el-card style="height: 750px">
          <div>
            <el-input
              clearable
              v-model="state.treeSearch"
              @blur="treeSearchBlur"
              placeholder="搜索"
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div style="margin-top: 10px">
            <el-tree
              :data="state.treeData"
              :props="state.defaultProps"
              default-expand-all
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <svg-icon
                  class-name="search-icon"
                  icon-class="wenjian"
                  style="margin-right: 5px"
                />
                <span>{{ node.label }}</span>
              </template>
            </el-tree>
          </div>
        </el-card>
      </div>
      <div class="right">
        <div class="right-top">
          <el-card>
            <div class="right-top-container">
              <div class="container-left">
                <img src="@/assets/images/keranqiti/远程控制.png" alt="" />
                <div style="margin-left: 10px">
                  <div>
                    <span
                      class="left-1"
                      :style="{
                        backgroundColor:
                          state.fenzhanDetail.error == true
                            ? '#67c23a'
                            : '#f56c6c',
                      }"
                      >{{
                        state.fenzhanDetail.error == true ? "正常" : "异常"
                      }}</span
                    >
                    <span class="left-2">{{
                      state.fenzhanDetail.statusDescription
                    }}</span>
                  </div>
                  <div style="margin-top: 10px">
                    <span class="left-3">状态更新时间</span>
                    <span class="left-4">{{
                      state.fenzhanDetail.startTime
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="container-right">
                <el-radio-group v-model="state.radio">
                  <el-radio :label="'复位'">复位</el-radio>
                  <el-radio :label="'消音'">消音</el-radio>
                  <el-radio :label="'传输消音'">传输消音</el-radio>
                </el-radio-group>
                <el-button
                  style="margin-left: 10px"
                  type="primary"
                  @click="xiafaFn(1)"
                  >下发</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
        <div class="right-bottom">
          <el-card style="height: 653px">
            <div class="right-bottom-t">
              <div class="bottom-t-1">
                <span> 开出口信息 </span>
                <span> 信息更新时间：{{ state.flreshTime }} </span>
                <span @click="refreshFn(1)">
                  <img src="@/assets/images/keranqiti/刷新.png" alt="" />
                  <span style="margin-left: 5px">刷新</span>
                </span>
              </div>
              <div class="bottom-t-2">
                <div v-for="(item, index) in state.xinxiData" :key="index">
                  <div class="t-2-1">
                    <span style="font-weight: 700">{{ item.portNumber }}</span>
                    <el-switch
                      class="main-el-switch"
                      v-model="item.status"
                      active-text="复电"
                      inactive-text="断电"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                    >
                    </el-switch>
                  </div>
                </div>
                <div>
                  <el-button @click="refreshFn(1)">刷新</el-button>
                  <el-button type="primary" @click="xiafaFn(2)">下发</el-button>
                </div>
              </div>
            </div>
            <div class="right-bottom-b">
              <div
                :style="{
                  'background-color':
                    item.powerOff === false ? '#f0f9eb' : '#fef3f3',
                }"
                class="bottom-b-1"
                v-for="(item, index) in state.lunboData"
                :key="index"
              >
                <div class="b-1-top">
                  <span>
                    <span class="top-1">{{ index + 1 }}</span>
                    <span
                      class="top-2"
                      :class="{
                        greenColor: item.powerOff === false,
                        redColor: item.powerOff === true,
                      }"
                      >{{ item.powerOff==false ? "复电" : "断电" }}</span
                    >
                  </span>
                  <img src="@/assets/images/keranqiti/曲线.png" alt="" />
                </div>
                <div class="b-1-bottom">
                  <div class="bottom-container">
                    <div class="container-1">
                      <div
                        v-if="item.powerOff==false"
                        style="margin-bottom: 10px"
                      >
                        <span>复电时间</span>
                        <span>{{ item.recoveryTime }}</span>
                      </div>
                      <div v-if="item.powerOff ===true">
                        <el-carousel height="180px">
                          <el-carousel-item v-for="(val,idx) in item.pointList" :key="idx">
                            <div style="margin-bottom: 15px;">
                              <span>断电测点</span>
                              <span>{{ val.pointName }}</span>
                            </div>
                            <div style="margin-bottom: 15px;">
                              <span>断电形式</span>
                              <span>{{ val.statusName }}</span>
                            </div>
                            <div style="margin-bottom: 15px;">
                              <span>断电时间</span>
                              <span>{{ val.startTime }}</span>
                            </div>
                            <div style="margin-bottom: 15px;">
                              <span>断电时长</span>
                              <span>{{ val.durationTime }}</span>
                            </div>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 下发弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="300"
        :height="auto"
        v-model="state.xiafaModal"
        resize
        :mask="true"
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">下发</div>
        </template>
        <template #default>
          <div class="form_box">
            <img src="@/assets/images/keranqiti/下发.png" alt="" />
            <div style="margin: 10px 0">是否确认下发?</div>
            <div
              class="form_footer"
              style="display: flex; justify-content: center"
            >
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "@/utils/request";
import { ElMessage } from "element-plus";
import { isArray } from "lodash";
const state = reactive({
  xiafaModal: false, //下发弹框
  radio: "",
  treeSearch: "",
  flreshTime: "",
  treeData: [
    {
      label: "001-工作面",
      children: [
        {
          label: "002-工作面1",
        },
        {
          label: "003-工作面1",
        },
        {
          label: "004-工作面1",
        },
        {
          label: "005-工作面1",
        },
      ],
    },
  ],
  defaultProps: {
    children: "children",
    label: "label",
  },
  xinxiData: [],
  lunboData: [],
  leftTreeid: "", //左侧树形列表第一个id
  fenzhanDetail: {}, //分站信息
  xiafaValue: null, //下发
});
//输入框失去焦点
const treeSearchBlur = () => {
  console.log(state.treeSearch, "treeSearchBlur");
  // getTreeList(state.treeSearch)
};
//树形点击事件
const handleNodeClick = (data) => {
  console.log("handleNodeClick", data);
  state.leftTreeid = data.value;
  //获取分站信息
  // getfenzhanDetail(data.value);
  //获取开出口历史信息
  // kaichukoDetail(data.value);
  //获取轮播信息
  // getLunonoDetail(data.value);
};
const getfenzhanDetail = (id) => {
  axios.post("/gas/remoteControl/substation/" + id).then((res) => {
    if (res.data) {
      state.fenzhanDetail = res.data;
    }
  });
};
const kaichukoDetail = (id) => {
  let arr = [];
  axios.post("/gas/remoteControl/controlPort/history/" + id).then((res) => {
    if (res.data) {
      res.data.forEach((item) => {
        if (item.status == 1) {
          item.status = true;
        } else {
          item.status = false;
        }
        arr.push({ portNumber: item.portNumber, status: item.status });
      });
      state.xinxiData = arr;
    }
  });
};
const getLunonoDetail = (id) => {
  axios
    .post("/gas/remoteControl/substation/powerInfo", {
      substationNumber: id,
    })
    .then((res) => {
      if(res.data){
state.lunboData=res.data
      }
    });
};
//下发
const xiafaFn = (val) => {
  if (val === 1) {
    state.xiafaValue = 1;
    if (!state.radio) {
      ElMessage.warning("请选择操作类型");
    } else {
      state.xiafaModal = true;
    }
  } else if (val === 2) {
    state.xiafaValue = 2;
    state.xiafaModal = true;
  }
};
//取消
const cancel = () => {
  state.xiafaModal = false;
};
//确定
const submitForm = () => {
  console.log("确定");
  if (state.xiafaValue == 1) {
    let obj = {
      substationNumber: state.leftTreeid,
    };
    if (!state.radio) {
      ElMessage.warning("请选择操作类型");
    } else {
      if (state.radio == "复位") {
        obj.reset = true; //复位
        obj.mute = false; //消音
        obj.check = false; //自检
      } else if (state.radio == "消音") {
        obj.reset = false; //复位
        obj.mute = true; //消音
        obj.check = false; //自检
      } else if (state.radio == "传输消音") {
        obj.reset = false; //复位
        obj.mute = false; //消音
        obj.check = true; //自检
      }
      console.log(obj, "obj");
      axios.post("/gas/remoteControl/controlAction", obj).then((res) => {
        ElMessage.success("下发成功");
      });
    }
  } else if (state.xiafaValue == 2) {
    //开出口信息下发
    axios
      .post("/gas/remoteControl/setControlPort", {
        controlPort1Status: state.xinxiData[0].status,
        controlPort2Status: state.xinxiData[1].status,
        controlPort3Status: state.xinxiData[2].status,
        controlPort4Status: state.xinxiData[3].status,
        substationNumber: state.leftTreeid,
      })
      .then((res) => {
        ElMessage.success("下发成功");
      });
  }
  state.xiafaModal = false;
};
//刷新
const refreshFn = (val) => {
  console.log("刷新");
  //获取实时时间年月日时分秒
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const date = now.getDate();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const second = now.getSeconds();
  //补零
  const monthStr = month < 10 ? `0${month}` : month;
  const dateStr = date < 10 ? `0${date}` : date;
  const hourStr = hour < 10 ? `0${hour}` : hour;
  const minuteStr = minute < 10 ? `0${minute}` : minute;
  const secondStr = second < 10 ? `0${second}` : second;
  //刷新时间
  state.flreshTime = `${year}-${monthStr}-${dateStr} ${hourStr}:${minuteStr}:${secondStr}`;
  // state.flreshTime = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
  if (val == 1) {
    // axios
    //   .post("/gas/remoteControl/controlPort/realTime/" + state.leftTreeid)
    //   .then((res) => {
    //     if (res.data) {
    //       res.data.forEach((item) => {
    //         state.xinxiData = [
    //           { portNumber: 1, status: item.controlPort1Status },
    //           { portNumber: 2, status: item.controlPort2Status },
    //           { portNumber: 3, status: item.controlPort3Status },
    //           { portNumber: 4, status: item.controlPort4Status },
    //         ];
    //       });
    //     }
    //   });
    //   //获取轮播信息
    //   getLunonoDetail(state.leftTreeid);
  }

};
//获取左侧树形列表
const getTreeList = (val) => {
  let obj={
    pageNum: 1,
    pageSize: 1000,
  }
  if(val){
obj.address=val
  }
  axios
    .post("/history/substation/list",obj)
    .then((res) => {
      state.leftTreeid = res.rows[0].id;
      //默认获取第一个数据
      refreshFn();
      getfenzhanDetail(state.leftTreeid);
      kaichukoDetail(state.leftTreeid);
      getLunonoDetail(state.leftTreeid);
      state.treeData = res.rows.map((item) => {
        return {
          label: item.address,
          value: item.id,
        };
      });
    });
};
onMounted(() => {
  // getTreeList();
});
</script>
<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 15px !important;
}
:deep(.el-tree .el-icon svg) {
  //原有的箭头 去掉
  display: none !important;
  height: 0;
  width: 0;
}
.container {
  margin-top: 10px;
  display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  // height: calc(100% - 350px);
  .left {
    width: 15%;
  }
  .right {
    width: 84%;
    margin-left: 10px;
    .right-top {
      margin-bottom: 10px;
      .right-top-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .container-left {
          display: flex;
          align-items: center;
          .left-1 {
            background-color: #358cf0;
            font-size: 12px;
            color: #fff;
            padding: 1px 5px;
          }
          .left-2 {
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
          }
          .left-3 {
            font-size: 10px;
            color: rgba(62, 70, 79, 0.6);
          }
          .left-4 {
            font-size: 12px;
            margin-left: 10px;
          }
        }
        // .container-right {

        // }
      }
    }
    .right-bottom {
      .right-bottom-t {
        .bottom-t-1 {
          span:nth-child(1) {
            font-weight: bold;
            font-size: 14px;
          }
          span:nth-child(2) {
            font-size: 12px;
            margin: 0 10px;
          }
          span:nth-child(3) {
            font-size: 12px;
            margin-left: 15px;
            cursor: pointer;
          }
        }
        .bottom-t-2 {
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .t-2-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f2f4f5;
            width: 260px;
            height: 50px;
          }
        }
      }
      .right-bottom-b {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .bottom-b-1 {
          width: 49.5%;
          height: 260px;
          background-color: #f3faf0;
          margin-top: 10px;
          padding: 10px;
          .b-1-top {
            img {
              width: 15px;
              height: 15px;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            .top-1 {
              font-weight: 700;
              font-size: 24px;
            }
            .top-2 {
              margin-left: 35px;
              position: relative;
            }
            .redColor {
              color: #f56c6c;
              &:before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #f56c6c;
                position: absolute;
                top: 40%;
                left: -25%;
                transform: translate(0, -50%);
              }
            }
            .greenColor {
              color: #67c23a;
              &:before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #67c23a;
                position: absolute;
                top: 40%;
                left: -25%;
                transform: translate(0, -50%);
              }
            }
          }
          .b-1-bottom {
            margin-top: 10px;
            .bottom-container {
              padding: 10px;
              width: 100%;
              height: 200px;
              overflow-y: auto;
              background-color: #fff;
              .container-1 {
                span:nth-child(1) {
                  font-size: 14px;
                  color: rgba(62, 70, 79, 0.6);
                  margin-right: 10px;
                }
                span:nth-child(2) {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.form_box {
  text-align: center;
}
.form_footer {
  margin: 0;
}
::v-deep .el-carousel__indicator {
  .el-carousel__indicators {
    // 指示器
    left: unset;
    transform: unset;
    right: 2%;
    margin-top: -10%;
    padding: 0;
  }
  .el-carousel__button {
    // 指示器按钮
    // width: 10px;
    // height: 10px;
    // border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .is-active .el-carousel__button {
    // 指示器激活按钮
    background: #3f8ec8;
  }
}
</style>
<!-- el-switch开关 -->
<style scoped lang="scss">
::v-deep .main-el-switch {
  position: relative;
  margin-left: 10px;
  .el-switch__core {
    height: 20px;
    border-radius: 12px;
    min-width: 60px;
    &:after {
      left: 4px;
      top: 3px;
    }
  }

  &.el-switch {
    &.is-checked {
      .el-switch__core {
        &:after {
          margin-left: -20px;
          left: 100%;
        }
      }
    }
  }

  &.is-checked {
    .el-switch__label--left {
      opacity: 0;
    }

    .el-switch__label--right {
      opacity: 1;
    }
  }

  .el-switch__label {
    position: absolute;
    top: 10;
  }

  .el-switch__label--left {
    right: 0;
    color: #fff;
    z-index: 1;
    margin-right: 8px;
  }

  .el-switch__label--right {
    left: 0;
    color: #fff;
    opacity: 0;
    margin-left: 8px;
  }
}
</style>